<template>
  <div>
    <sunSearch :search="searchList" />
    <el-card class="sun-el-card">
      <sunUpdataAdd :title="this.$route.meta.title" :tab-list="tabList" :tab-list-right="tabListRight" />
      <el-table v-loading="listLoading" :header-cell-style="{color:'#000000'}" :data="list" element-loading-text="数据加载中..." border fit highlight-current-row>
        <el-table-column label="ID" prop="id" />
      </el-table>
      <pagination v-show="laypage.total>0" :total="laypage.total" :page.sync="laypage.number" :limit.sync="laypage.size" @pagination="requestData" />
    </el-card>
  </div>
</template>

<script>
import { /** get, */ } from '@/api/request' // get, post, put, remove, patch
import { $remove } from '@/sun-components/SunMsg.js' // $tooltips, $remove, $submit, $dialogs, $onFinishBox
import SunSearch from '@/sun-components/SunSearch'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
import Pagination from '@/sun-components/Pagination'
export default {
  name: 'SunVue',
  components: { Pagination, SunSearch, SunUpdataAdd },
  data() {
    return {
      searchFilter: {},
      searchList: [{ 'id': 'ID', type: 'input', show: 'id', value: '' }],
      tabList: [{ id: 1, old_id: 1, name: '导航一', value: '关键值', type: 'primary', disabled: false, loading: false }, { id: 2, old_id: 1, name: '导航二', value: '关键值', type: 'mini', disabled: false, loading: false }],
      tabItem: { id: 1, old_id: 1, name: '导航一', value: '关键值', type: 'primary', disabled: false, loading: false },
      tabListRight: [{ id: 1, old_id: 1, name: '按钮一', value: '关键值', icon: '', type: 'primary', disabled: false, loading: false }, { id: 2, old_id: 1, name: '按钮二', value: '关键值', icon: '', type: 'primary', disabled: false, loading: false }],
      listLoading: true,
      list: null,
      laypage: { number: 1, size: 10, total: 0 },
      formData: {}
    }
  },
  mounted() {
    this.upData()
  },
  methods: {
    // 数据更新
    upData() { this.requestData() },
    // list 删除
    async removeData(id) { $remove(`删除接口/${id}`, this) },
    // searchList 搜索 置空
    async searchResult(filter) { this.searchFilter = filter; this.upData() },
    // tabList 按钮
    async tabHeaderSelect(id) {
      const _that = this
      _that.tabList.forEach((item) => {
        if (item.old_id === id) {
          return false
        }
        if (item.id === id) {
          item.type = 'primary'
          _that.tabItem = item
          _that.$set(item, 'loading', true)
          _that.upData()
        } else {
          _that.$set(item, 'loading', false)
          item.type = 'mini'
        }
        item.old_id = id
      })
    },
    // addData 添加
    async addData(row) {},
    // tabListRight 按钮
    async tabHeaderBtn(id) {
      const _that = this
      _that.tabListRight.forEach((item) => {
        if (item.id === id) {
          _that.$set(item, 'loading', true)
        } else {
          _that.$set(item, 'loading', false)
        }
      })
    },
    // 列表数据
    async requestData() {
      this.listLoading = false
      /**
      await get(`请求接口`, Object.assign(this.searchFilter, { 'page[size]': this.laypage.size, 'page[number]': this.laypage.number })).then(response => {
        if (response.code === 0) {
          this.list = response.data
          this.laypage.total = response.meta.total
        }
        this.listLoading = false
      })
      */
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss'
</style>
